<!-- <!DOCTYPE html> -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet Rain demo</title>
    <link rel="stylesheet" type="text/css" href="./css/main.css"/>
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"/>
    <link href="./css/bootstrap-colorpicker.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
      integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
      crossorigin=""/>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script src="./js/bootstrap.bundle.min.js"></script>
    <script src="./js/bootstrap-colorpicker.min.js"></script>
</head>
<body>
    <div id="wrap">
        <div id="left-panel">
            <div class="container">
                <h2 class="header">Leaflet.Rain</h2>
                <div class="row">
                    <label class="col-sm-6 col-form-label">Angle</label>
                    <input class="mb-1 col-sm-4 mb-3 form-control angle-controller" type="number" value="80"/>
                    <label class="col-sm-2 col-form-label">deg</label>
                </div>
                <div class="row">
                    <label class="col-sm-6 col-form-label">Width</label>
                    <input class="col-sm-4 mb-3 form-control width-controller" type="number" value="1" min="1"/>
                    <label class="col-sm-2 col-form-label">px</label>
                </div>
                <div class="row">
                    <label class="col-sm-6 col-form-label">Spacing</label>
                    <input class="col-sm-4 mb-3 form-control spacing-controller" type="number" value="10" min="1"/>
                    <label class="col-sm-2 col-form-label">px</label>
                </div>
                <div class="row">
                    <label class="col-sm-6 col-form-label">Drop length</label>
                    <input class="col-sm-4 mb-3 form-control length-controller" type="number" value="4" min="1"/>
                    <label class="col-sm-2 col-form-label">px</label>
                </div>
                <div class="row">
                    <label class="col-sm-6 col-form-label">Drop interval</label>
                    <input class="col-sm-4 mb-3 form-control interval-controller" type="number" value="10" min="1"/>
                    <label class="col-sm-2 col-form-label">px</label>
                </div>
                <div class="row">
                    <label class="col-sm-6 col-form-label">Speed</label>
                    <input class="col-sm-4 mb-3 form-control speed-controller" type="number" value="1" min="0" step="0.1"/>
                    <label class="col-sm-2 col-form-label">x</label>
                </div>
                <div class="row">
                    <label class="col-sm-2 col-form-label">Color</label>
                    <div id="colorpicker" class="col-sm-10 input-group" title="Using color option" >
                      <input type="text" class="form-control input-sm" data-color="rgb(78, 166, 233)"/>
                      <span class="input-group-append">
                        <span class="input-group-text colorpicker-input-addon"><i></i></span>
                      </span>
                    </div>
                </div>
            </div>
            <div id="content">
            </div>
        </div>
        <div id="map">
        </div>
    </div>
    <script src="./js/bundle.js"></script>
</body>
</html>
